<#include "../../components/cc-var.ftl" />
<script type="text/x-template" id="switcher-btn-tpl">
    <div class="switcher-btn">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="管理后台相关的开关" name="admin">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">数据同步相关开关<span>(控制数据同步到江苏环境)</span></p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.manualAuditForJS" :ad="allSwitches.manualAuditForJS">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label"
                                >
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)"
                                    >
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">媒资订阅相关开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.mediaNotifyCacheUpdate" :ad="allSwitches.mediaNotifyCacheUpdate">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label"
                                >
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)"
                                    >
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">关闭合成海报开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.closeMergePoster" :ad="allSwitches.closeMergePoster">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label">
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)">
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">媒资专题图片回溯开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.mediaTopicPosterRecall" :ad="allSwitches.mediaTopicPosterRecall">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label">
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)">
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">推荐流控制开关</p>
                    <el-form :inline="true" label-width="90px" label-position="left">
                        <cc-var v-if="allSwitches.switchMediaAutomation" :ad="allSwitches.switchMediaAutomation">
                            <template scope="{ad: ad}">
                                <el-form inline ref="form" label-width="120px" class="form">

                                    <el-form-item class="el-col-8">
                                        <el-input v-model="ad.input" autocomplete="on" placeholder="推荐流id" clearable/>
                                    </el-form-item>

                                    <el-form-item class="el-col-6">
                                        <el-switch v-model="ad.value" active-color="#13ce66" inactive-color="#ff4949"/>
                                    </el-form-item>

                                    <el-form-item class="el-col-6">
                                        <el-button type="primary" @click="switchMediaAutomation(ad)">提交</el-button>
                                    </el-form-item>

                                </el-form>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="接口相关的开关" name="api">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">儿童策略开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.childPolicyEnable" :ad="allSwitches.childPolicyEnable">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label"
                                >
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)"
                                    >
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">卖场模式开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <cc-var v-if="allSwitches.marketModule418" :ad="allSwitches.marketModule418">
                            <template scope="{ad: ad}">
                                <el-form-item
                                        :label="ad.label"
                                >
                                    <el-switch
                                            on-text="开"
                                            off-text="关"
                                            :value="ad.value"
                                            @input="handleToggleSwitch(ad)"
                                    >
                                    </el-switch>
                                </el-form-item>
                            </template>
                        </cc-var>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</script>

<script>
    Vue.component('switcher-btn', {
        template: '#switcher-btn-tpl',
        data() {
            return {
                allSwitches: {},
                activeTab: 'admin',
                urls: {
                    //获取所有开关信息
                    getAllSwitcher: '/v1//switcher/getAllSwitcher.html',
                    //切换开关状态
                    switcherStatus: '/v1/switcher/switcherStatus.html',
                    //推荐流控制
                    switchMediaAutomation : '/v1/mediaAutomation/openStatusSwitch.html',
                },
                input:'',
                value: true
            }
        },
        methods: {
            handleToggleSwitch(item) {
                this.$confirm('确定' + (item.value ? '关闭' : '开启') + '【' + item.label + '】吗？')
                        .then(function () {
                            this.ajax(this.urls.switcherStatus, {
                                id: 'VP_'+item.id,
                                status: item.value ? 0 : 1
                            }, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                    item.value = !item.value
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {
                        })
            },
            getSwitches() {
                this.ajax(this.urls.getAllSwitcher,{}, function (data) {
                    if (data.code == 0) {
                        const allSwitches = {}
                        data.data.forEach(function (item) {
                            allSwitches[item.id] = {
                                id: item.id,
                                label: item.name,
                                value: !!item.status
                            }
                        }.bind(this))
                        this.$set(this, 'allSwitches', allSwitches)
                        console.log(allSwitches)
                    }
                }.bind(this))
            },
            switchMediaAutomation(item) {
                this.$confirm('确定' + (item.value ? '开启' : '关闭') + '【推荐流:' + item.input + '】吗？')
                        .then(function () {
                                    this.ajax(this.urls.switchMediaAutomation, {
                                        id: item.input,
                                        openStatus: item.value ? 1 : 0
                                    }, function (result) {
                                        if (result.code == 0) {
                                            this.$message({
                                                type: 'success',
                                                message: "操作成功！"
                                            })
                                        }else {
                                            this.$message({
                                                type: 'error',
                                                message: result.msg
                                            })
                                        }
                                    }.bind(this))
                                }.bind(this)
                        ).catch(function () {
                })
            }
        },
        created() {
            this.getSwitches()
        }
    })

</script>

<style>
    .switcher-btn .el-form--inline > .cc-var {
        display: inline-block;
        margin-right: 40px;
    }

    .switcher-btn-wrapper {
        border: 1px dashed #ccc;
        margin: 20px 20px 40px 20px;
        padding: 0 20px;
    }

    .switcher-btn-wrapper .switcher-title {
        background: #fff;
        position: relative;
        top: -10px;
        display: inline-block;
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .switcher-btn-wrapper .switcher-title span {
        margin: 0 10px;
        font-size: 14px;
        font-weight: normal;
    }
</style>